<!DOCTYPE html>
<!--
Copyright 2017 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->

<link rel="import" href="/components/google-signin/google-signin.html">
<link rel="import" href="/components/iron-icons/iron-icons.html">
<link rel="import" href="/components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="/components/paper-tooltip/paper-tooltip.html">

<dom-module id="navigation-bar">
  <template>
    <style>
      nav {
        background-color: var(--paper-indigo-500);
        display: flex;
        font-weight: bold;
        width: 100%;
      }

      #spacer {
          margin: auto;
      }

      a {
        color: var(--paper-indigo-50);
      }

      a:hover {
        color: white;
      }

      google-signin {
        margin: 0;
        padding: 8px;
      }
    </style>

    <nav id="navbar">
      <a href="/">
        <paper-icon-button src="/static/logo.svg"></paper-icon-button>
      </a>
      <span id="spacer"></span>
      <a href="https://chromium.googlesource.com/catapult/+/HEAD/dashboard/dashboard/pinpoint/README.md" target="_blank">
        <paper-icon-button icon="help"></paper-icon-button>
        <paper-tooltip>Documentation</paper-tooltip>
      </a>
      <a id="buglink" on-tap="handleBugClick" href="https://bugs.chromium.org/p/chromium/issues/entry?summary=[%F0%9F%93%8D]%20&comment=&components=Speed%3EBisection&description=[[bugDescription]]" target="_blank">
        <paper-icon-button icon="feedback"></paper-icon-button>
        <paper-tooltip>File a bug</paper-tooltip>
      </a>
      <google-signin
          id="gsi"
          height="short" theme="dark"
          scopes="email"
          on-google-signin-success="handleSignIn"
          on-google-signed-out="handleSignOut"></google-signin>
    </nav>
  </template>

  <script>
    'use strict';
    Polymer({
      is: 'navigation-bar',

      properties: {
        bugDescription: {
          type: String,
          value: ''
        },
        authHeaders: {
          type: Object,
          notify: true,
          readonly: true
        },
        user: {
          type: String,
          value: '',
          notify: true,
          readonly: true
        }
      },

      handleBugClick() {
        this.updateBugDescription();
      },

      updateBugDescription() {
        let jobEl = document.querySelector('job-page');
        let description = [`Filed via: ${window.location.href}\n`];
        if (jobEl && jobEl.job) {
          let job = Object.assign({}, jobEl.job);
          // These fields are certainly potentially useful in debugging
          // but they are quite large, so we remove them before setting
          // the issue description.
          delete job.state;
          delete job.bots;
          description.push(JSON.stringify(job, null, 1));
        }
        this.bugDescription = encodeURIComponent(description.join('\n'));
      },

      ready() {
        if (window.location.href.includes('-stage')) {
          this.$.gsi.setAttribute("client-id", "22573382977-u263jlijs2uiio0uq7qm7vso3vuh7ec5.apps.googleusercontent.com");
        }
        else {
          this.$.gsi.setAttribute("client-id", "62121018386-aqdfougp0ddn93knqj6g79vvn42ajmrg.apps.googleusercontent.com");
        }
      },

      handleSignIn() {
        const user = gapi.auth2.getAuthInstance().currentUser.get();
        const tokenType = user.getAuthResponse().token_type;
        const accessToken = user.getAuthResponse().access_token;

        this.authHeaders = {
          Authorization: tokenType + ' ' + accessToken
        };
        this.user = user.getBasicProfile().getEmail();
      },

      handleSignOut() {
        this.authHeaders = null;
        this.user = '';
      },
    });
  </script>
</dom-module>
